<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			.top_context{
				padding: 100px;
				text-align: center;
				line-height: 100px;
			}
			.sticky_element{
				height: 50px;
				text-align: center;
				line-height: 20px;
				background-color: black;
				color: #ffffff;
			}
			.main_context{
				height: 800px;
				background: #ffaaff;
			}
			/* 样式：吸顶灯卡页面顶部 */
	
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="top_context">顶部内容区域</div>
		
		<div class="sticky_element">我是吸顶元素</div>
		
		<div class="main_context">111111111111111111
		</div>
		<script>
			//ready()事件源语法： $(document).ready(function(){})
			//                  简写：$(function(){});
			//总结：页面元素全部加载完毕，在执行JQ相关操作
			//script元素放在最后一个body位置【可不写】
			$(function(){
				
				//固定值：页面顶部到吸顶灯位置--BOM语法
				//offset() 获取或者设置元素相对于文档偏移量
				//offset().top 从顶部到吸顶灯元素的偏移量
				var se=$(".sticky_element").offset().top;
				//滚动值：BOM对象+事件源
				//$(window)抓取页面window对象，监听窗口事件：窗口改变、滚动
				//理解：实时抓取页面滚动值
				$(window).scroll(function(){
				var st=$(window).scrollTop();
				//滚动值：获取页面滚动位置
				//scrollTop()获取页面滚动垂直距离
				
				//判断 固定值大于滚动值，滚动超过200 实现切换：吸顶灯效果
				if(se>st){
					//条件成立：大于200px 切换吸顶灯效果
					$(".sticky_element").addClass("sticky");
				}else{
					//条件不成立：小于200px
					$(".sticky_element").removeClass("sticky");
				}
				});
				
	
			});
		</script>
	</body>
</html>
<!-- //吸顶灯效果--BOM案例：六个对象的方法使用
				//思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
				//     2.页面元素到吸顶灯位置 200px，大于200px
				//     3.
 -->